<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-input
          v-model="query.blurry"
          clearable
          size="small"
          placeholder="输入文章名称, 作者名, 购买者名搜索"
          style="width: 300px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <date-range-picker v-model="query.createTime" class="date-item" unlink-panels />
        <el-select
          v-model="query.state"
          clearable
          size="small"
          placeholder="状态"
          class="filter-item"
          style="width: 90px"
          @change="crud.toQuery"
        >
          <el-option v-for="item in stateOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
        <el-select
          v-model="query.type"
          clearable
          size="small"
          placeholder="类型"
          class="filter-item"
          style="width: 90px"
          @change="crud.toQuery"
        >
          <el-option v-for="item in typeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
        <el-select
          v-model="query.payType"
          clearable
          size="small"
          placeholder="支付方式"
          class="filter-item"
          style="width: 100px"
          @change="crud.toQuery"
        >
          <el-option v-for="item in payOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
        <rrOperation />
      </div>
      <crudOperation :permission="permission" />
    </div>
    <el-dialog append-to-body :visible.sync="orderDialog" :title="'分账详情'" width="800px">
      <el-table ref="singleTable" :data="receivers" border highlight-current-row style="width: 100%;height: 300px;">
        <el-table-column prop="user" label="用户">
          <template slot-scope="scope">
            <span>{{ scope.row.user.nickName }}({{ scope.row.user.alipayName }})</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="分成金额" />
        <el-table-column prop="result" label="结果" />
        <el-table-column prop="finishTime" label="完成时间" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="failReason" label="失败原因" />
      </el-table>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      lazy
      :data="crud.data"
      row-key="id"
      @select="crud.selectChange"
      @select-all="crud.selectAllChange"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column :selectable="checkboxT" type="selection" width="55" />
      <el-table-column label="类型" prop="type" width="120">
        <template slot-scope="scope">
          <el-button v-if="scope.row.type === 0" round size="mini" type="primary">文章</el-button>
          <el-button v-if="scope.row.type === 1" round size="mini" type="success">咨询</el-button>
          <el-button v-if="scope.row.type === 2" round size="mini" type="warning">VIP</el-button>
        </template>
      </el-table-column>
      <el-table-column label="主题" prop="article" width="150">
        <template slot-scope="scope">
          <span style="">{{ scope.row.articleName || 'VIP购买' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="作者" width="100" prop="author">
        <template slot-scope="scope">
          <span>{{ scope.row.authorName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="购买者" width="150" prop="user">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column width="50" prop="id" label="ID">
        <template slot-scope="scope">
          <span>{{ scope.row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" width="80" prop="payType">
        <template slot-scope="scope">
          <span>{{ scope.row.payType === 1 ? '微信' : '支付宝' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="价格" prop="price" width="50" />
      <el-table-column label="状态" prop="state" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 2">未支付</span>
          <span v-if="scope.row.state === 3">已支付</span>
          <el-button v-if="scope.row.state === 3 && scope.row.subType === 1" type="text">(不分账)</el-button>
          <el-button v-if="scope.row.state === 3 && scope.row.subType === 0 && scope.row.tradeSettled === 1" type="text" @click="querySettleOrder(scope.row.id)">(已分账)</el-button>
          <el-button v-if="scope.row.state === 3 && scope.row.subType === 0 && scope.row.tradeSettled === 2" type="text" @click="settleOrder(scope.row.id)">(解冻)</el-button>
          <el-button v-if="scope.row.state === 3 && scope.row.subType === 0 && scope.row.tradeSettled === 0 && scope.authorId !== 1" type="text" @click="settleOrder(scope.row.id)">分账</el-button>
        </template>
      </el-table-column>
      <el-table-column label="分账明细" prop="state">
        <template slot-scope="scope">
          <div v-for="item in scope.row.receivers" :key="item.id">
            <div><span style="color:coral;font-weight:bold;">￥{{ item.amount }}</span>--{{ item.username || item.account }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建日期" />
    </el-table>
    <pagination />
  </div>
</template>

<script>
import crudQuery from '@/api/system/purchase'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import CRUD, { crud, header, presenter } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import DateRangePicker from '@/components/DateRangePicker'
import pagination from '@crud/Pagination'
import crudOperation from '@crud/CRUD.operation'
export default {
  name: 'Purchase',
  components: { rrOperation, crudOperation, DateRangePicker, pagination },
  cruds() {
    return CRUD({ title: '购买记录', url: 'api/purchase', queryOnPresenterCreated: false, crudMethod: { ...crudQuery }})
  },
  mixins: [presenter(), header(), crud()],
  // 设置数据字典
  dicts: ['article_status', 'article_type'],
  data() {
    return {
      depts: [],
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        deptSort: [
          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
        ]
      },
      permission: {
        edit: ['admin', 'query:edit'],
        del: ['admin', 'query:del']
      },
      stateOptions: [
        { key: '2', display_name: '未支付' },
        { key: '3', display_name: '已支付' }
      ],
      typeOptions: [
        { key: '0', display_name: '文章' },
        { key: '1', display_name: '咨询' },
        { key: '2', display_name: 'VIP充值' }
      ],
      payOptions: [
        { key: '0', display_name: '支付宝' },
        { key: '1', display_name: '微信' }
      ],
      distributing: false,
      options: [],
      loading: false,
      userForm: {
        id: ''
      },
      receivers: [],
      orderDialog: false
    }
  },
  created() {
    this.crud.optShow = {
      add: false,
      edit: false,
      del: false,
      download: true
    }
  },
  mounted() {
    console.log(this.crud.query)
    console.log(this.$route.query)
    this.crud.query.articleId = this.$route.query.articleId
    this.crud.query.type = this.$route.query.type
    this.crud.query.state = this.$route.query.state
    this.crud.query.userId = this.$route.query.userId
    this.crud.toQuery()
  },
  methods: {

    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      form.enabled = `${form.enabled}`
    },
    getSupDepts(id) {

    },
    buildDepts(depts) {
      depts.forEach(data => {
        if (data.children) {
          this.buildDepts(data.children)
        }
        if (data.hasChildren && !data.children) {
          data.children = null
        }
      })
    },
    settleOrder(id) {
      crudQuery.settleOrder(id).then(res => {
        if (res.success) {
          this.crud.toQuery()
        } else {
          this.$message.error(res.subMsg)
        }
      })
    },
    querySettleOrder(id) {
      crudQuery.querySettleOrder(id).then(res => {
        this.orderDialog = true
        console.log(res)
        this.receivers = res.filter(v => v.user)
      })
    },
    // 获取弹窗内文章数据
    loadDepts({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        crudQuery.getArticles({ enabled: true, pid: parentNode.id }).then(res => {
          parentNode.children = res.content.map(function(obj) {
            if (obj.hasChildren) {
              obj.children = null
            }
            return obj
          })
          setTimeout(() => {
            callback()
          }, 100)
        })
      }
    },
    // 新增编辑前做的操作
    [CRUD.HOOK.beforeToCU](crud, form) {
      this.$router.push('/query/answer?id=' + form.id)
    },
    checkboxT(row, rowIndex) {
      return row.id !== 1
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
